<template>
  <div class="pageUs">
    <div class="about-title-box">
      <h2>关于我们</h2>
    </div>
    <hr />
    <div class="address">
      <p>
        公司地址：武汉市东湖高新区高新二路北辰光谷里8A-1904 <br />
        联系方式：18986269878 <br />
        企业邮箱：318158891@qq.com <br />
      </p>
    </div>
    <div class="map-box">
      <div id="container" ref="container"></div>
      <!-- <div id="dialog" ref="dialog">
        <p>地址复制成功</p>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "pageUs",
  mounted() {
    this.createMap();
  },
  methods: {
    createMap() {
      var map = new BMapGL.Map("container");
      console.log(map);
      var point = new BMapGL.Point(114.416412, 30.481056);
      map.centerAndZoom(point, 15);

      // 创建点标记
      var marker = new BMapGL.Marker(point);
      map.addOverlay(marker);
      // 创建信息窗口
      var opts = {
        width: 200,
        height: 100,
        title: "湖北建云教育有限公司",
      };
      var infoWindow = new BMapGL.InfoWindow(
        "地址：武汉市东湖高新区高新二路北辰光谷里8A-1904",
        opts
      );
      // 点标记添加点击事件;
      marker.addEventListener("click", function() {
        map.openInfoWindow(infoWindow, point); // 开启信息窗口
      });
      // infoWindow.addEventListener("click", function() {
      //   console.log("复制监听");
      //  document.execCommand("copy");
      //   this.$refs.dialog.show();
      // });
    },

    execClick() {
      document.execCommand("copy");
      this.$refs.dialog.show();
    },

    execCopy(event) {
      var thisDiv = document.getElementById("mapContent");
      var str = thisDiv.textContent.slice(6);
      if (isIE()) {
        if (window.clipboardData) {
          window.clipboardData.setData("Text", str);
          this.$refs.dialog.show();
          setTimeout(function() {
            this.$refs.dialog.hide();
          }, 50000);
        }
      } else {
        event.preventDefault();
        if (event.clipboardData) {
          event.clipboardData.setData("text/plain", str);
          this.$refs.dialog.show();
          setTimeout(function() {
            this.$refs.dialog.hide();
          }, 50000);
        }
      }
    },
    isIE() {
      var input = window.document.createElement("input");
      //"!window.ActiveXObject" is evaluated to true in IE11
      if (window.ActiveXObject === undefined) return null;
      if (!window.XMLHttpRequest) return 6;
      if (!window.document.querySelector) return 7;
      if (!window.document.addEventListener) return 8;
      if (!window.atob) return 9;
      //"!window.document.body.dataset" is faster but the body is null when the DOM is not
      //ready. Anyway, an input tag needs to be created to check if IE is being
      //emulated
      if (!input.dataset) return 10;
      return 11;
    },
  },
};
</script>
<style lang="scss" scoped>
.pageUs {
  display: flex;
  flex-direction: column;
  background: #fff;
  width: 909px;
  padding: 45px 76px 49px 76px;
  margin-bottom: 30px;
  .about-title-box {
    text-align: center;
  }
  h2 {
    font-size: 22px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 36px;
  }
  hr {
    margin-bottom: 42px;
  }
  p {
    width: 755px;
    font-size: 16px;
    color: #666666;
    margin-bottom: 30px;
  }

  .map-box {
    width: 749px;
    height: 400px;
    #container {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      border: green 1px solid;
      font-family: "微软雅黑";
    }
  }
}
</style>
